<template>
  <div>
    <el-card style="margin: 20px">
      <el-steps :active="active" finish-status="success" style=" width:500px;margin:50px auto">
        <el-step title="填写入库单基础信息" />
        <el-step title="填写货品清单" />
      </el-steps>
      <el-form
        v-if="showpart1"
        ref="form"
        :model="formdata"
        :rules="rules"
        label-width="80px"
        :label-position="labelPosition"
      >
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item label="入库单号">
              <el-input v-model="formdata.code" :disabled="disabled=true" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运单编号" prop="name">
              <el-input v-model="formdata.billCode" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划到达时间" prop="name">
              <el-date-picker v-model="formdata.planArrivalTime" type="date" placeholder="计划到达时间" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货主" prop="name">
              <el-select v-model="formdata.ownerId" placeholder="请选择" @change="ownerChange">
                <el-option
                  v-for="item in ownerList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="仓库" prop="name">
              <el-select v-model="formdata.warehouseId" placeholder="请选择">
                <el-option
                  v-for="item in warehouseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发货人姓名" prop="name">
              <el-input v-model="formdata.shipperName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="送货人姓名" prop="name">
              <el-input v-model="formdata.deliveryName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="送货人电话" prop="name">
              <el-input v-model="formdata.deliveryPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注">
              <el-input v-model="formdata.remark" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center">
          <el-button round style="width:100px" @click="$router.back()">返回</el-button>
          <el-button type="success" round style="width:200px" @click="nextPage">下一步</el-button>
        </el-row>
      </el-form>
      <el-card>

        <el-row v-if="showpart2">
          <el-button round @click="showdialog=true">添加货品</el-button>
          <el-button round>删除货品</el-button>
          <el-divider />
          <el-row style="text-align: center">
            <el-button round @click="$router.back()">返回</el-button>
            <el-button type="success" round>提交</el-button>
          </el-row>
        </el-row>
      </el-card>

    </el-card>
    <add-stock :showdialog="showdialog" @closedialog="showdialog=false" />
  </div>
</template>

<script>
import { addStockPage, getStockNum, getOwnerInfo, getWarehouseName, getGoodsPageDetail } from '@/api/stork'
import AddStock from './add-stock.vue'
import { formatDate } from '@/utils/index'
export default {
  components: {
    AddStock
  },
  data() {
    return {
      // 货主仓库信息
      warehouseList: [],
      // 货主信息
      ownerList: [],
      // 弹窗
      showdialog: false,
      showpart1: true,
      showpart2: false,
      // 步骤条
      active: 0,
      labelPosition: 'top',
      formdata: {
        code: '', // 入库单号
        billCode: '', // 运单编号
        planArrivalTime: '', // 计划到达时间
        ownerId: '', // 货主
        warehouseId: '', // 仓库
        shipperName: '', // 发货人姓名
        deliveryName: '', // 送货人姓名
        deliveryPhone: '', // 送货人电话
        remark: '',
        // id: '1095779160409816033',
        id: '',
        status: 1
      },
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'bulr' }]
      }
    }
  },

  async created() {
    // 获取货主信息
    const result = await getOwnerInfo()
    console.log(result.data.data)
    this.ownerList = result.data.data
    // 获取入库单号
    const res = await getStockNum()
    // console.log(res.data.data)
    this.formdata.code = res.data.data
  },
  methods: {
    async nextPage() {
      // 格式化时间
      this.formdata.planArrivalTime = formatDate(this.formdata.planArrivalTime)
      // 校验
      await this.$refs.form.validate()
      //  发送新增请求
      console.log(this.formdata)
      const res = await addStockPage(this.formdata)
      console.log(res)
      // 获取货主仓库货物信息
      const res1 = await getGoodsPageDetail(this.formdata.ownerId)
      console.log(res1)
      // 显示第二部
      this.showpart1 = false
      this.showpart2 = true
      if (this.active++ > 1) this.active = 0
    },
    // 根据货主id获取仓库信息
    // 发送请求
    async ownerChange(value) {
      // 获取货主仓库信息
      const res = await getWarehouseName(value)
      console.log(res.data.data)
      this.warehouseList = res.data.data
    }

  }

}
</script>

<style>

</style>
